Page({
  onLoad() {
    const context = jd.createCanvasContext('recordCvs');
    var pieChart = new PieChart(context);
    pieChart.init(data);
    context.draw();
  }
});
var PieChart = function (ctx) {
    /*绘制工具*/
    this.ctx = ctx;
    /*绘制饼图的中心*/
    this.w = 200;
    this.h = 400;
    /*圆心*/
    this.x0 = this.w / 2 + 100;
    this.y0 = this.h / 2;
    /*半径*/
    this.radius = 100;
    /*伸出去的线的长度*/
    this.outLine = 20;
    /*说明的矩形大小*/
    this.rectW = 30;
    this.rectH = 16;
    this.space = 20;
}
PieChart.prototype.init = function (data) {
    /*1.准备数据*/
    this.drawPie(data);
};
PieChart.prototype.drawPie = function (data) {
    var that = this;
    /*1.转化弧度*/
    var angleList = this.transformAngle(data);
    /*2.绘制饼图*/
    var startAngle = 0;
    angleList.forEach(function (item, i) {
        /*当前的结束弧度要等于下一次的起始弧度*/
        var endAngle = startAngle + item.angle;
        that.ctx.beginPath();
        that.ctx.moveTo(that.x0, that.y0);
        that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
        var color = that.ctx.fillStyle = that.getRandomColor();
        that.ctx.fill();
        /*下一次要使用当前的这一次的结束角度*/
        /*绘制标题*/
        that.drawTitle(startAngle, item.angle, color , item.title);
        /*绘制说明*/
        that.drawDesc(i,item.title);
        startAngle = endAngle;
    });
};
PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) {
    var edge = this.radius + this.outLine;
    /*x轴方向的直角边*/
    var edgeX = Math.cos(startAngle + angle / 2) * edge;
    /*y轴方向的直角边*/
    var edgeY = Math.sin(startAngle + angle / 2) * edge;
    /*计算出去的点坐标*/
    var outX = this.x0 + edgeX;
    var outY = this.y0 + edgeY;
    this.ctx.beginPath();
    this.ctx.moveTo(this.x0, this.y0);
    this.ctx.lineTo(outX, outY);
    this.ctx.strokeStyle = color;
    /*画文字和下划线*/
    this.ctx.font = '14px Microsoft YaHei';
    var textWidth = Number(this.ctx.measureText(title).width) ;
    if(outX > this.x0){
        /*右*/
        this.ctx.lineTo(outX + textWidth,outY);
        this.ctx.setTextAlign('left');
    }else{
        /*左*/
        this.ctx.lineTo(outX - textWidth,outY);
        this.ctx.setTextAlign('right');
    }
    this.ctx.stroke();
    this.ctx.setTextBaseline('bottom');
    this.ctx.fillText(title,outX,outY);

};
PieChart.prototype.drawDesc = function (index,title) {
    /*绘制说明*/
    this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH);
    /*绘制文字*/
    this.ctx.beginPath();
    this.ctx.setTextAlign('left');
    this.ctx.setTextBaseline('top');
    this.ctx.font = '12px Microsoft YaHei';
    this.ctx.fillText(title,this.space + this.rectW + 10 , this.space + index * (this.rectH + 10));
};
PieChart.prototype.transformAngle = function (data) {
    /*返回的数据内容包含弧度的*/
    var total = 0;
    data.forEach(function (item, i) {
        total += item.num;
    });
    /*计算弧度 并且追加到当前的对象内容*/
    data.forEach(function (item, i) {
        var angle = item.num / total * Math.PI * 2;
        item.angle = angle;
    });
    return data;
};
PieChart.prototype.getRandomColor = function () {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
};

var data = [
    {
        title: '15-20岁',
        num: 6
    },
    {
        title: '20-25岁',
        num: 30
    },
    {
        title: '25-30岁',
        num: 10
    },
    {
        title: '30以上',
        num: 8
    }
];

